<template>
    <view class="container">
        <view class="b-h"></view>
        <view class="logo"></view>
        <view class="tips">诚邀您加入一品</view>
        <view class="form">
            <view class="input">
                <u-input
                    v-model="formData.mobile"
                    placeholder="请输入手机号"
                    border="none"
                    fontSize="26rpx"
                    color="#FFFFFF"
                    @change="changeValue"
                    placeholderStyle="color: #D8D5FF;font-size: 26rpx;"
                ></u-input>
                <view class="err"><text>{{ errText }}</text></view>
            </view>
            <view class="input" style="margin-top: 60rpx">
                <u-input
                    placeholder="请输入验证码"
                    border="none"
                    fontSize="26rpx"
                    color="#FFFFFF"
                    placeholderStyle="color: #D8D5FF;font-size: 26rpx;"
                    v-model="formData.code"
                >
                    <template slot="suffix">
                        <u-code
                            ref="uCode"
                            @change="codeChange"
                            changeText="重新发送(Xs)"
                            keep-running
                            @end="end"
                        ></u-code>
                        <u-text
                            :text="tips"
                            @click="showCaptcha()"
                            size="24rpx"
                            :color="btn_disenble? '#D8D5FF':'#FFFFFF'"
                        >
                        </u-text>
                    </template>
                </u-input>
                <view style="height: 21rpx"></view>
            </view>
            <view class="input" style="margin-top: 60rpx">
                <u-input
                    v-model="formData.inviteCode"
                    placeholder="请输入邀请码"
                    border="none"
                    fontSize="26rpx"
                    color="#FFFFFF"
                    disabled
                    disabledColor=""
                    placeholderStyle="color: #D8D5FF;font-size: 26rpx;"
                ></u-input>
                <view style="height: 21rpx"></view>
            </view>
            <view class="btn" :class="isSubmit? 'btn-a':'btn-d'" @click="onsubmit">立即注册</view>
            <view class="btn-login" @click="loginPage()">我已注册，直接登录</view>
        </view>
        <u-modal
            :show="captchaShow"
            title="在下方输入图片验证码"
            @confirm="getCode()"
            :closeOnClickOverlay="true"
            @close="captchaShow = false"
        >
            <view class="captcha">
                <u-input
                    placeholder="请输入"
                    border="surround"
                    v-model="captcha"
                >
                    <u-image
                        width="180rpx"
                        height="70rpx"
                        slot="suffix"
                        :src="this.captchaData.img"
                        @click="captchaMethod()"
                    ></u-image>
                </u-input>
            </view>
        </u-modal>
    </view>
</template>

<script>
    import { getCode, getCaptcha } from "@/config/api-java"
    export default {
        name: "register",
        data() {
            return {
                formData: {
                    mobile: null,
                    code: null,
                    inviteCode: null
                },
                rules: {
                    'mobile': {
                        type: 'string',
                        required: true,
                        message: '请填写手机号码',
                        trigger: ['blur', 'change']
                    }
                },
                tips: "发送验证码",
                btn_disenble: false,
                errText: null,
                isSubmit: false,
                captchaData: {},
                captcha: null,
                captchaShow: false
            }
        },
        onLoad(option) {
          this.formData.inviteCode = option.inviteCode
        },
        methods: {
            codeChange(text) {
                this.tips = text
            },
            async getCode() {
                uni.showLoading({
                    title: '正在发送验证码'
                })
                const res = await getCode({mobile: this.formData.mobile, text: this.captcha, key: this.captchaData.key})
                uni.$u.toast('验证码已发送');
                this.$refs.uCode.start();
                this.btn_disenble = true
                this.captchaShow = false
            },
            end() {
                this.btn_disenble = false
            },
            changeValue(val) {
                if (uni.$u.test.mobile(val)) {
                    this.errText = null
                    this.isSubmit = true
                } else {
                    this.isSubmit = false
                    this.errText = '请输入正确手机号码'
                }
            },
            async onsubmit() {
                uni.showLoading()
                const res = await this.$store.dispatch("user/webLogin", this.formData)
                uni.$u.toast('注册成功')
                window.location.href="/static/yp/download.html"
                //uni.$u.route('pages/share/follow')
            },
            async showCaptcha() {
                if (!this.$u.test.mobile(this.formData.mobile)) {
                    this.$u.toast('请填写正确手机号码')
                    return
                }
                if (this.btn_disenble) {
                    return
                }
                uni.showLoading()
                const res = await getCaptcha()
                this.captchaData = res
                this.captchaShow = true
                uni.hideLoading()
            },
            async captchaMethod() {
                const res = await getCaptcha()
                this.captchaData = res
            },
            loginPage() {
                window.location.href="/static/yp/download.html"
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        background: linear-gradient(179deg, #948CFF 0%, #6F66E2 100%);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .b-h {
            height: 160rpx;
        }
        .logo {
            background: url("https://img.ionepin.com/f63fbc0a0c8fa46fa1c3cde2cdc03e1774288863.png") no-repeat;
            background-size: 100% 100%;
            width: 186rpx;
            height: 122rpx;
            margin: 0 auto;
        }
        .tips {
            font-size: 32rpx;
            font-weight: 300;
            color: #FFFFFF;
            margin-top: 25rpx;
            text-align: center;
        }
        .form {
            padding: 0 70rpx;
            .input {
                border-bottom: 1rpx solid #A39CFF;
                margin-top: 82rpx;
                .err {
                    height: 36rpx;
                    color: #fa3534;
                    font-size: 24rpx;
                    line-height: 30rpx;
                    text {
                        display:inline-block;
                        transform: scale(0.7);
                    }
                }
            }
            .btn {
                width: 100%;
                height: 90rpx;
                border-radius: 2rpx;
                font-size: 30rpx;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 90rpx;
                margin-top: 136rpx;
            }
            .btn-login {
                height: 90rpx;
                border-radius: 2rpx;
                border: 1px solid #FFFFFF;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 90rpx;
                margin-top: 40rpx;
            }
            .btn-d {
                background: #A4A8B1;
            }
            .btn-a {
                background: #3C22C0;
            }
        }
    }
</style>
